Validate input data type base on pull down selection

I am a novice when comes to JavaScript, AJAX. I am working on a form, which will allow users to update their contact information. In order to make the form flexible, I need to use pull down list.

Depends on the pull down list selection, I use script.aculo.us to validate the user input before submit and pass the necessary data, such as contact type, contact information and ranking to a php program for updating. This form should allow multiple contacts being added or edited, thus there are multiple pull-down lists, and corresponding input fields and ranking.

I run into several problems with my form -
(1) Build a flexible JavaScript function, so every time when an user selects a contact type from anyone of the pull down list, and enters contact information to the input field, the form will validate the input to make sure the user entered valid data type.
(2) So far with the switch statement, I was able to pass the correct validation variable to the first input class, however, the input field does not get validated and I cannot figure out why?
(3) What is the best way to pass the contact information to the php program for database update?

Here is my code:

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>Testing Dynamic input field</title>

<script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>

<script src="scriptaculous/src/effects.js" type="text/javascript"></script>

<script type="text/javascript" src="fabtabulous.js"></script>

<script type="text/javascript" src="validation.js"></script>

<link rel="stylesheet" type="text/css" href="style.css" />

<link rel="stylesheet" type="text/css" href="poc.css" />

<script language="javascript">

function validatetext(Dropdown_Val, Dropdown_Val_SI)

{ 
 
switch (Dropdown_Val[Dropdown_Val_SI].value)

{

case 'email' :

//document.MyForm.TextField.value="Email";

document.MyForm.TextField.className="required validate-email";

break

case 'workphone' :

//document.MyForm.TextField.value="Work Phone";

document.MyForm.TextField.className="required validate-workphone";

break

case 'cellphone' :

//document.MyForm.TextField.value="Cell Phone";

document.MyForm.TextField.className="required validate-phone";

break

case 'homephone' :

//document.MyForm.TextField.value="Home Phone";

document.MyForm.TextField.className="required validate-phone";

break

case 'pager' :

//document.MyForm.TextField.value="Pager";

document.MyForm.TextField.className="required validate-phone";

break

case 'address' :

//document.MyForm.TextField.value="Address";

document.MyForm.TextField.className="required";

break

case 'room' :

//document.MyForm.TextField.value="Building and Room";

document.MyForm.TextField.className="required";

break

default :

document.MyForm.TextField.className="No Value";

break

}
 
}

</script>

</head>

<body>

<center>

  <div id="container"> <br>

    <h1>Update My Contacts </h1>

    <div id="mainmenu">

      <form name="MyForm" action="updatemycontact.php" method="post">

        <fieldset>

        <legend>Update contact information Form</legend>

        <table>

          <tr>

            <th>Type</th>

            <th>Contact Input</th>

            <th> Ranking </th>

          </tr>

          <tr>

            <td><select name="DropField01" onChange="validatetext(DropField01,DropField01.selectedIndex);">

                <option value="">Please select one ...</option>

                <option value="email">Email</option>

                <option value="cellphone">Cell Phone</option>

                <option value="workphone">Work Phone</option>

                <option value="homephone">Home Phone</option>

                <option value="pager">Pager</option>

                <option value="address">Address</option>

                <option value="room">Building and Room</option>

              </select>

            </td>

            <td><div class="form-row">

                <div class="field-widget">

                  <input type="text" name="TextField" class="">

                </div>

              </div></td>

            <td> 01 </td>

          </tr>

          <tr>

            <td><select name="DropField02" onChange="validatetext(DropField02,DropField02.selectedIndex);">

                <option value="">Please select one ...</option>

                <option value="email">Email</option>

                <option value="cellphone">Cell Phone</option>

                <option value="workphone">Work Phone</option>

                <option value="homephone">Home Phone</option>

                <option value="pager">Pager</option>

                <option value="address">Address</option>

                <option value="room">Building and Room</option>

              </select>

            </td>

            <td><div class="form-row">

                <div class="field-widget">

                  <input type="text" name="TextField02" class="">

                </div>

              </div></td>

            <td> 02 </td>

          </tr>

          <tr>

            <td><select name="DropField03" onChange="validatetext(DropField03,DropField03.selectedIndex);">

                <option value="">Please select one ...</option>

                <option value="email">Email</option>

                <option value="cellphone">Cell Phone</option>

                <option value="workphone">Work Phone</option>

                <option value="homephone">Home Phone</option>

                <option value="pager">Pager</option>

                <option value="address">Address</option>

                <option value="room">Building and Room</option>

              </select>

            </td>

            <td><div class="form-row">

                <div class="field-widget">

                  <input type="text" name="TextField03" class="" title="Enter new contact info">

                </div>

              </div></td>

            <td> 03 </td>

          </tr>

        </table>

        </fieldset>

        <input value="Update Contact Information" type="submit">

        <input type="reset" name="Reset" value="Reset">

      </form>

      <script type="text/javascript">

            function formCallback(result, form) {

                window.status = "valiation callback for form '" + form.id + "': result = " + result;

            }
 
            var valid = new Validation('test', {immediate : true, onFormValidate : formCallback});
 
        </script>

    </div>

  </div>

</center>

</body>

</html>

Any help on resolving the problems I encountered is greatly appreciated!

SkipNRun

Jul 30 '07 #1

Subscribe Post Reply

3953

pbmods

5,821

Expert 4TB

Heya, SkipNRun. Welcome to TSDN!

I award 15 points for creative use of [i] tags. However, I have to deduct 15 points for not using [code] tags.

Better luck next time.

Please use CODE tags when posting source code. See the REPLY GUIDELINES on the right side of the page next time you post.

Jul 30 '07 #2

by: John Smith | last post by:

Ok, I have 2 xml files that are really similar. They have the exact same structure exept that in one XML some element are required and in the other they are simply absent from the xml. Problem...

.NET Framework

Validating user input?

by: chuck | last post by:

I need some help with validating user input. I am writing a C computer program for an intro to C course. Here is the situation. I am creating an application that will do currency conversions. ...

C / C++

Populate data in one user control based on selection in another user control

by: rajarameshvarma | last post by:

Hi, I have two user controls in an asp.net webpage each contains a DropDownList. Depending on the selection of the drop down in one user control i need to populate data in the other drop down...

C# / C Sharp

Using regexp to validate simple form

by: TokyoJ | last post by:

I run a small camp in Alaska for kids and my director is asking for a web form. Could someone please have a look and offer some advice on where I'm making mistake(s)? I'm using the RegExp function...

Javascript

User Input issue

by: n3o | last post by:

Hello Comp.Lang.C Members, I have an issue with user input that I have been trying to figure out for the longest. For instance, let's say you have something like this: void foo() { int num;...

C / C++

Error displaying minimum input

by: manxie | last post by:

Dear All Readers, I'm supposed to create a program with a switch and using voids to execute number of codes, that includes finding sum, average, maximum, and minimum, please read my code:...

C / C++

Validate--dropdown menu lists--no selection made

by: ammweb | last post by:

How would you validate a page that had several drop down menus. When the submit button is submitted, and NO selection has been made? See code below: <html> <head> </head> <body> <table...

Javascript

Validate user entry against array for getURL

by: cstansbu | last post by:

This is the item selection piece for a Sharepoint knowledge base. If you type a valid plan code you get info, but if you type garbage you get a 404 file not found. I want to check user input against...

Javascript

validate checkbox

by: lolodede | last post by:

i would like to make sure user at least one checkbox and if it select otherand need to make sure to write something in text box <?php $name = 0; $cusID=0; $hobbies =0 ; if (isset ($_POST)) {...

PHP

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

Validate input data type base on pull down selection

Similar topics